<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>基本资料</span>
    </div>
    <el-form ref="form" :model="userInfo" :rules="rules" label-width="80px">
      <el-form-item label="登录账号">
        <el-input :disabled="true" v-model="userInfo.username"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="userInfo.nickname"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="userInfo.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateUser">确认修改</el-button>
        <el-button @click="fn">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { PutUserInfo } from '@/api/user'
export default {
  // 数据回填
  data() {
    return {
      // userInfo: {
      //   username: this.$store.state.user.user.username,
      //   // username: this.$store.state.模块名.数据名,
      //   nickname: this.$store.state.user.user.nickname,
      //   email: this.$store.state.user.user.email
      // }
      //
      // ❗ 上述，userInfo 对象中的属性，和 vuex 中的user中的属性完全一致。
      //
      // 那么，代码为什么不能这样写呢？
      //
      // userInfo: this.$store.state.user.user
      //
      // ❗❗❗ 因为，对象是引用类型的，( 栈 , 堆 ) 上述写法，相当于是 userInfo 和 vuex 中的 user 对象，地址相同了，改一个对象，另一个也会被修改。
      //
      // 解决办法，浅拷贝一个新的对象： 这样与 Vuex 中的数据就关系了
      userInfo: { ...this.$store.state.user.user },
      rules: {
        nickname: [
          { required: true, message: '昵称不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    // 点击确认修改按钮
    updateUser() {
      // 当点击登录的时候，先进行完整的验证，验证不通过就 return，验证通过则提交数据
      this.$refs.form.validate(async valid => {
        if (!valid) return
        // console.log('验证通过，提交数据')
        const { data: res } = await PutUserInfo(this.userInfo)
        // console.log(res)
        if (res.code === 0) {
          // 提示成功
          this.$message.success(res.message)
          // 更新成功，更新vuex中的 user 数据
          this.$store.dispatch('user/getUser')
        } else {
          // 错误提示
          this.$message.error(res.message)
        }
      })
    },
    // 点击重置按钮
    fn() {
      // resetFields 恢复表单为最初的样子(第一次打开页面的时候)；去掉红色的表单验证提示
      // 再修改昵称 点重置还会回到最初的样子
      this.$refs.form.resetFields()
      // 所以要将 vuex中的数据，更新(赋值)到组件
      this.userInfo = { ...this.$store.state.user.user }
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  font-size: 13px;
  /deep/ .el-form-item__label {
    font-size: 13px;
  }
  /deep/ .el-button {
    font-size: 13px;
  }
  .el-form {
    width: 400px;
    .el-input {
      font-size: 13px;
    }
  }
}
</style>
